<!--综合站点添加和修改-->
<script lang="ts" setup>
import {inject, onMounted, ref, watch} from "vue";
import {selItem,addItemList,delItemList,setItemList,addCate,setCate} from "../request/request"
import {ElMessage} from "element-plus";
 const props = defineProps<{ websiteList: any }>();//接收外部传过来的值（接收）
 const Emit = defineEmits(["receiveWebsite"]);//定义外部的函数 向外界传值（确定按钮）
 const reload2:any = inject('reload2');//调用home.vue重载方法(body)


 const data=ref({
     officialWebsiteShow:true,//默认展开
     selectList:[],//类型数据
     itemList:{
         id:null,
         cateid:1,
         name:null,
         image:null,
         url:null,
     }
 })

 watch(()=>data.value.officialWebsiteShow,(newValue,oldValue)=>{
     if (newValue!=oldValue){
         sendWebsite(false);
     }
 })

 onMounted(()=>{
     selItem().then((res)=>{
         data.value.selectList=res.data.name
     })//获取数据
     if (props.websiteList!=false){
         data.value.itemList=props.websiteList
     }//修改数据（传参数）
 })
 /**
 * @type(添加)
 */
 function addWebUrl(){
     addItemList(data.value.itemList).then((res)=>{
         if (res.code==200){
             reload2();
             sendWebsite(false);
             ElMessage.success('新增成功')
         }else {
             ElMessage.error('新增失败')
         }
     })
 }
 /**
 * @type(修改)
 */
 function setWebUrl(){
     setItemList(data.value.itemList).then((res)=>{
        if (res.code==200){
            reload2();
            sendWebsite(false);
            ElMessage.success('修改成功')
        }else {
            ElMessage.error('修改失败')
        }
     })
 }

/**
 * @type(销毁组件)
 */
 function sendWebsite(e){
     Emit("receiveWebsite",false);//销毁组件
}
</script>

<template>
    <el-dialog
            v-model="data.officialWebsiteShow"
            align-center
            title="添加官网站点"
            width="450"
    >
        <!--类型标题-->
        <div class="fromInput">
            <span>类型标题</span>
            <el-input
                v-model="data.itemList.name"
                placeholder="Please input title"
                class="input-with-select"
                maxlength="15"
            >
                <template #prepend>
                    <el-select v-model="data.itemList.cateid" placeholder="Select" style="width: 135px">
                        <el-option v-for="item in data.selectList" :label="item.name" :value="item.id" />
                    </el-select>
                </template>
            </el-input>
        </div>

        <!--图片链接-->
        <div class="fromInput">
           <span>图片链接</span>
           <el-input v-model="data.itemList.image" placeholder="Please input imageUrl">
               <template #prepend>Http://</template>
           </el-input>
       </div>

        <!--站点网址-->
        <div class="fromInput">
            <span>站点网址</span>
            <el-input v-model="data.itemList.url" placeholder="Please input webUrl">
                <template #prepend>Http://</template>
            </el-input>
        </div>

        <!--按钮事件-->
        <div class="formBtn">
            <el-button @click="data.officialWebsiteShow=false">取消</el-button>
            <el-button v-if="props.websiteList==false" type="primary" @click="addWebUrl()">添加</el-button>
            <el-button v-else type="primary" @click="setWebUrl()">修改</el-button>
        </div>


    </el-dialog>
</template>

<style scoped>
.fromInput{
   margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}
.fromInput span{
    font-size: 1rem;
    font-weight: bold;
    height: 30px;
}
 el-dialog{
    font-family: "Arial Black";
    margin-bottom: 20px;
}
 .formBtn{
     margin-top: 25px;
     display: flex;
     width: 100%;
     justify-content: flex-end;
 }
</style>